<template>
    <div class="ma-content-block p-4">
        <a-space>
            <a-button type="primary" @click="add"><template #icon><icon-plus /></template>新增</a-button>
        </a-space>
    </div>
    <a-table :columns="columns" :data="tableData" :pagination="pagination" @page-change="changePage">
        <template #image="{ record }">
            <a-tooltip content="查看图片">
                <a-link @click="preview_image(record.img)"><icon-image /> 查看图片</a-link>
            </a-tooltip>
        </template>
        <template #optional="{ record }">
            <a-space>
                <a-button type="text" @click="edit(record)"><template #icon><icon-edit /></template>编辑</a-button>
            </a-space>
            <a-popconfirm @ok="delete_item(record.id)" content="确定要删除该数据吗?" position="bottom">
                <a-button type="text" status="danger"><template #icon><icon-delete /></template>删除</a-button>
            </a-popconfirm>
        </template>
    </a-table>

    <a-image-preview :src="img_url" v-model:visible="preview_show" />
    <a-modal :width="800" :visible="show" unmount-on-close @ok="save" @cancel="show = false">
        <template #title>
            <span>{{ title }}</span>
        </template>
        <DataModal ref="editRef" @refreshList="refreshList" :id="props_id" :position="position" />
    </a-modal>
</template>
<script setup>
import { reactive, ref, shallowRef } from 'vue'
import { Message } from "@arco-design/web-vue";
import DataModal from "@/views/rotation/components/DataModal.vue";

import request from '@/api/rotation'
const columns = [
    {
        title: 'ID',
        dataIndex: 'id',
        ellipsis: true,
        tooltip: true,
        fixed: 'left',
        align: "center"
    },
    {
        title: '位置',
        dataIndex: 'position_name',
        align: "center"
    },
    {
        title: '排序',
        dataIndex: "sort",
        align: "center"
    },
    {
        title: '封面图片',
        dataIndex: "img",
        slotName: "image",
        align: "center"
    },
    {
        title: '操作',
        slotName: 'optional',
        align: "center"
    },
];
const tableData = ref([]);
const pagination = reactive({
    total: 1,
    current: 1,
    pageSize: 10,
    showTotal: true,
    showJumper: true
});

const position = ref([]);
const getList = async () => {
    let params = {
        ...{
            page: pagination.current,
            pageSize: pagination.pageSize
        }
    };
    const { data: { list: { data: table_tata, total }, position: position_value } } = await request.get_list(params);
    tableData.value = table_tata;
    pagination.total = total;
    position.value = position_value;
};
getList();
const changePage = (current) => {
    pagination.current = current;
    getList();
};

//放大图片
const img_url = ref('')
const preview_show = ref(false)
const preview_image = (url) => {
    img_url.value = url
    preview_show.value = true
};
const props_id = ref('');
// 新增
const title = ref("");
const show = ref(false);
const add = () => {
    title.value = "新增";
    props_id.value = "";
    show.value = true;
};
//编辑
const edit = async (record) => {
    title.value = "编辑";
    props_id.value = record.id;
    show.value = true;
};

const editRef = shallowRef();
const save = () => editRef.value.submit();
const refreshList = () => {
    pagination.current = 1;
    show.value = false;
    getList();
};

const delete_item = async (id) => {
    await request.delete_data({
        ids: [id]
    });
    getList();
};
</script>